<template>
  <div class="dashboard">
    <!-- 过滤器 & 刷新按钮 -->
    <div class="filter-row">
      <el-card>
        <el-row :gutter="20">
          <el-col :span="4">
            <el-select v-model="selected" placeholder="全部">
              <el-option label="全部" value="all"></el-option>
              <el-option label="水厂" value="water"></el-option>
              <el-option label="泵站" value="pump"></el-option>
            </el-select>
          </el-col>
          <el-col :span="4">

            <el-button type="primary">
              <el-icon>
                <Refresh />
              </el-icon>
              刷新数据
            </el-button>
          </el-col>
        </el-row>
      </el-card>
    </div>

    <!-- 第一行：水厂 & 泵站信息 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6" v-for="item in stationData" :key="item.name">
        <el-card>
          <div class="station-header">
            <span>{{ item.name }}</span>
            <el-tag size="small" :type="item.type === '水厂' ? 'primary' : 'success'">
              {{ item.type }}
            </el-tag>
          </div>
          <div class="station-info">
            <h2>{{ item.pressure }} MPa</h2>
            <p>今日压力合格率 {{ item.passRate }}%</p>
            <el-progress :percentage="item.passRate"  ></el-progress>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 第二行：压力统计图表 & 震幅排名 -->
    <el-row :gutter="20" class="charts-row">
      <el-col :span="12">
        <el-card class="box-card">
          <div class="card-header">
            <span class="title">压力分布统计</span>
            <!-- <el-link type="primary">自定义设置</el-link> -->
          </div>
          <div ref="pressureChart" class="chart"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <span class="title">1小时压力振幅排名</span>
          <el-table :data="pressureRank" style="width: 100%;margin-top: 20px;">
            <el-table-column prop="rank" label="排名" width="80"></el-table-column>
            <el-table-column prop="station" label="站点名称"></el-table-column>
            <el-table-column prop="amplitude" label="压力振幅"></el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <!-- 第三行：报警类型统计 & 最近报警记录 -->
    <el-row :gutter="20" class="charts-row">
      <el-col :span="12">
        <el-card class="box-card">
          <span class="title">报警类型分布</span>
          <div ref="alarmChart" class="chart"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <span class="title">最近报警记录</span>
          <el-table :data="alarmRecords" style="width: 100%;margin-top: 20px;">
            <el-table-column label="报警类型" width="120">
              <template #default="{ row }">
                <el-tag :type="getAlarmTag(row.type)">{{ row.type }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="station" label="站点名称"></el-table-column>
            <el-table-column prop="time" label="时间"></el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import * as echarts from "echarts";

const selected = ref("all");

// 站点数据
const stationData = ref([
  { name: "清水湾水厂", type: "水厂", pressure: "0.58", passRate: 95 },
  { name: "龙湖泵站", type: "泵站", pressure: "0.62", passRate: 88 },
  { name: "金沙水厂", type: "水厂", pressure: "0.55", passRate: 92 },
  { name: "滨海泵站", type: "泵站", pressure: "0.65", passRate: 85 },
]);

// 压力振幅排名
const pressureRank = ref([
  { rank: 1, station: "清水湾水厂", amplitude: "0.15 MPa" },
  { rank: 2, station: "龙湖泵站", amplitude: "0.12 MPa" },
  { rank: 3, station: "金沙水厂", amplitude: "0.10 MPa" },
]);

// 报警记录
const alarmRecords = ref([
  { type: "压力异常", station: "清水湾水厂", time: "2024-01-20 14:30:00" },
  { type: "设备故障", station: "龙湖泵站", time: "2024-01-20 13:15:00" },
  { type: "压力异常", station: "金沙水厂", time: "2024-01-20 12:45:00" },
]);

// 获取进度条颜色
const progressColor = (rate) => (rate >= 90 ? "#67C23A" : rate >= 85 ? "#E6A23C" : "#F56C6C");

// 获取报警标签颜色
const getAlarmTag = (type) => {
  switch (type) {
    case "压力异常":
      return "danger";
    case "设备故障":
      return "warning";
    case "通讯中断":
      return "info";
    default:
      return "success";
  }
};

// ECharts 图表
const pressureChart = ref(null);
const alarmChart = ref(null);

let pressureEChart;
let alarmEChart;
const resizeCharts = () => {
  pressureEChart.resize();
  alarmEChart.resize();
};
onMounted(() => {
  // 压力统计图
  pressureEChart = echarts.init(pressureChart.value);
  pressureEChart.setOption({

    xAxis: { type: "category", data: ["A", "B", "C", "D", "E"] },
    yAxis: { type: "value" },
    series: [{
      data: [2, 5, 8, 4, 1], type: "bar", itemStyle: {
        color: '#1890ff' // 设置该系列的颜色
      },
    }],
  });

  // 报警类型分布图
  alarmEChart = echarts.init(alarmChart.value);
  alarmEChart.setOption({
    series: [
      {
        type: "pie",

        data: [
          { value: 10, name: "压力异常" },
          { value: 8, name: "设备故障" },
          { value: 6, name: "通讯中断" },
          { value: 5, name: "水质异常" },
          { value: 4, name: "其他" },
        ],
      },
    ],
  });

  window.addEventListener("resize", resizeCharts);
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", resizeCharts);
});
</script>

<style scoped>
.dashboard {
  /* padding: 20px; */
}

.filter-row {
  margin-bottom: 20px;
}

.stats-row {
  margin-bottom: 20px;
}

.charts-row {
  margin-bottom: 20px;
}

.chart {
  width: 100%;
  height: 300px;
}

.station-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.station-info h2 {
  color: #3662e3;
  font-size: 30px;
  text-align: left;
  line-height: 20px;
  font-weight: bold;
}

.station-info p {
  font-size: 14px;
  text-align: left;
}

.box-card {
  height: 360px;
}

.title {
  font-size: 18px;
  font-weight: normal;
}

</style>